[V0_FILE]typescriptreact:file="components/navigation.tsx" "use client" import Link from "next/link" import { usePathname } from "next/navigation" import { Button } from "@/components/ui/button" import { ScrollArea } from "@/components/ui/scroll-area" const navItems = [ { name: "Introduction", href: "/" }, { name: "Getting Started", href: "/getting-started" }, { name: "Components", href: "/components" }, { name: "API Reference", href: "/api-reference" }, ] export default function Navigation() { const pathname = usePathname() return (

Docs

) } [V0_FILE]typescriptreact:file="components/app-sidebar.tsx" "use client" import * as React from "react" import Link from "next/link" import { usePathname } from "next/navigation" import { GalleryVerticalEnd, Search } from "lucide-react" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Sidebar, SidebarContent, SidebarGroup, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarMenu, SidebarMenuItem, SidebarMenuButton, } from "@/components/ui/sidebar" const navItems = [ { title: "Introduction", url: "/" }, { title: "Getting Started", url: "/getting-started" }, { title: "Components", url: "/components" }, { title: "API Reference", url: "/api-reference" }, ] export function AppSidebar() { const pathname = usePathname() return (

Docs v1.0.0

Navigation {navItems.map((item) => ( {item.title} ))} ) } [V0_FILE]typescriptreact:file="app/page.tsx" entry="true" import type { Metadata } from "next" export const metadata: Metadata = { title: "Introduction | Minimal Docs Site", description: "Welcome to our minimal documentation site", } export default function Home() { return (

Welcome to Our Docs

This is a gorgeous minimal documentation site built with Next.js, Tailwind CSS, and shadcn/ui components.

Features

Clean and minimal design
Dark mode support
Responsive layout
Easy navigation with shadcn sidebar
Built with Next.js App Router

Getting Started

To get started with our documentation, please navigate through the sections using the sidebar on the left. Here's a quick overview of the available sections:

Getting Started: Learn how to install and set up our library
Components: Explore the available components and how to use them
API Reference: Detailed information about our API and its methods

If you have any questions or need further assistance, don't hesitate to reach out to our support team.

Contributing

We welcome contributions to our documentation. If you find any errors or have suggestions for improvement, please open an issue or submit a pull request on our GitHub repository.

) } [V0_FILE]typescriptreact:file="app/layout.tsx" entry="true" import "./globals.css" import { Inter } from "next/font/google" import { SidebarProvider, SidebarTrigger } from "@/components/ui/sidebar" import { AppSidebar } from "@/components/app-sidebar" const inter = Inter({ subsets: ["latin"] }) export const metadata = { title: "Minimal Docs Site", description: "A gorgeous minimal documentation site using Next.js App Router", } export default function RootLayout({ children, }: { children: React.ReactNode }) { return (

{children}

) } [V0_FILE]typescriptreact:file="app/api-reference/page.tsx" entry="true" import type { Metadata } from "next" export const metadata: Metadata = { title: "API Reference | Minimal Docs Site", description: "Detailed API reference for our library", } export default function ApiReference() { return (

API Reference

This section provides a detailed reference for the API of our library. You'll find information about available methods, their parameters, and return values.

Client

The main class for interacting with our API.

Constructor

        {`new Client(config: ClientConfig)`}

Creates a new instance of the Client class.

Parameters

config: An object containing the client configuration

Methods

doSomething()

        {`async doSomething(): Promise`}

Performs an action and returns a result.

Returns

A Promise that resolves to a Result object.

Types

ClientConfig

        {`interface ClientConfig {
  apiKey: string;
  environment: 'production' | 'development';
}`}

Result

        {`interface Result {
  id: string;
  data: any;
  timestamp: number;
}`}

For more detailed information about specific components and their props, please refer to the Components section.

) } [V0_FILE]typescriptreact:file="app/components/page.tsx" entry="true" import type { Metadata } from "next" export const metadata: Metadata = { title: "Components | Minimal Docs Site", description: "Explore the components available in our library", } export default function Components() { return (

Components

Our library provides a set of reusable components to help you build your application faster. Here's an overview of some key components:

Button

The Button component is a versatile and customizable button that can be used for various actions in your application.

        {`import { Button } from '@our-company/package';

`}

Card

The Card component is used to display content in a box with a consistent style.

        {`import { Card, CardHeader, CardContent } from '@our-company/package';


  Card Title
  This is the card content.
`}

Input

The Input component is a styled input field for collecting user data.

        {`import { Input } from '@our-company/package';

 console.log(e.target.value)} />`}

For a complete list of components and their props, please refer to our API Reference section.

) } [V0_FILE]typescriptreact:file="app/getting-started/page.tsx" entry="true" import type { Metadata } from "next" export const metadata: Metadata = { title: "Getting Started | Minimal Docs Site", description: "Learn how to get started with our documentation", } export default function GettingStarted() { return (

Getting Started

Welcome to the getting started guide for our documentation site. Follow these steps to set up your environment and begin using our tools.

Installation

To install our package, run the following command in your terminal:

        npm install @our-company/package

Configuration

After installation, you need to set up the configuration file. Create a file named config.js in your project root and add the following content:

        {`module.exports = {
  apiKey: 'YOUR_API_KEY',
  environment: 'production'
}`}

Usage

Here's a basic example of how to use our package in your project:

        {`import { Client } from '@our-company/package';

const client = new Client();
const result = await client.doSomething();
console.log(result);`}

For more detailed information, please check out our Components and API Reference sections.

) }

About

Tags

Share

About

Tags

Share

More from shadcn

More Templates Like This